;
(function(window) {

  const hlSteps = {
    template: `<div class="hl-steps-container"
         :class="[ 'hl-steps__' + direction ]"
    >
        <slot></slot>
    </div>`,
    data() {
      return {
        steps: [],
        stepOffset: 0,
        onStatusIndex: -1,
      }
    },
    props:{
      space: [Number, String],
      active: Number,
      direction: {
        type: String,
        default: 'horizontal'
      },
      alignCenter: Boolean,
      simple: Boolean,
      processStatus: {
        type: String,
        default: 'wait'
      }
    },
    components: {

    },
    watch: {
      active(newVal,oldVal){
        this.$emit('change',newVal,oldVal)
      },
      steps(steps){
        steps.forEach((child,index) => {
          child.index = index
        })
      }
    },
    created(){

    },
    methods: {

    }

  }

  Vue.component('hl-steps', hlSteps)

}(window))
